<template>
  <div class="content-wrapper">
    <div class="nav">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/administration-integralDividend' }">奖惩动态</el-breadcrumb-item>
        <el-breadcrumb-item>积分红利</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button type="primary" @click="synData" v-if="isAuth('appraisal:lcbstatistics:syn')">同步数据</el-button>
      </div>
    </div>
    <div class="content">
      <div class="search-bar">
        <div>
          <el-input placeholder="按照名字模糊查询" prefix-icon="el-icon-search" v-model="searchData.userName" style="width: 180px;"></el-input>
        </div>
        <Quarter @postPeriod="getPeriod"></Quarter>
      </div>
      <div class="main-content">
        <el-table :data="departmentList" style="width: 100%;" border :height="tableHeight+'px'"
        row-key="id"
        :span-method="arraySpanMethod"
        lazy
        :load="getStatisticsList"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" label="部门" min-width="100"></el-table-column>
          <el-table-column prop="userName" label="姓名" min-width="100" align="center"></el-table-column>
          <el-table-column prop="pointsChange" label="积分变化" min-width="100" align="center"></el-table-column>
          <el-table-column prop="bonusChange" label="当季红利" min-width="100" align="center"></el-table-column>
          <el-table-column label="操作" min-width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="showDetailDialog(scope.row)" style="padding: 0;">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      class="dialog-style"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :show-close="false">
      <div slot="title" class="title">
        <el-button class="back" type="text" @click="dialogVisible=false;">返回</el-button>
        <span>{{curUser.dingName}} <span v-if="curUser.department">【{{curUser.department}}】</span>个人红利历史记录</span>
      </div>
      <div class="content">
        <div class="info-wrapper">
          <div class="info">
            <div class="info-item">当前积分：<span v-if="personList[0]">{{personList[0].lcbPointsBalance}}</span></div>
            <div class="info-item">红利分：<span v-if="personList[0]">{{personList[0].lcbBonusBalance}}</span></div>
            <div class="info-item">上季红利指数：{{seasonData.statisticsBonusIndex}}</div>
          </div>
          <span><el-button type="primary" @click="synLcbData" v-if="isAuth('appraisal:lcbresultrecord:syn')">同步数据</el-button></span>
        </div>
        <el-table :data="personList" :height="tableHeight+'px'" stripe style="width: 100%" border>
          <el-table-column prop="lcbCreateTime" sortable label="时间" min-width="120" align="center"></el-table-column>
          <el-table-column prop="lcbOperatorName" sortable label="操作人" min-width="100" align="center"></el-table-column>
          <el-table-column prop="lcbPoints" label="积分变更" min-width="100" align="center"></el-table-column>
          <el-table-column prop="lcbBonus" label="红利变更" min-width="100" align="center"></el-table-column>
          <el-table-column prop="lcbRemark" label="说明" min-width="100" align="center"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'
import Quarter from "./components/Quarter";
export default {
  data () {
    return {
      tableHeight: '',
      searchData: {
        deptId: '',
        userName: '',
        lcbYear: 0,
        lcbQuarter: 0,
        limit: 999
      },
      dialogVisible: false,
      statisticsList: [],
      seasonData: {
        statisticsBonusIndex: '',
      },
      personList: [],
      curUser: {
        dingId: '',
        dingName: '',
        department: '',
      },
      departmentList: [],
    };
  },
  mixins: [dingMixin],
  components: {
    Quarter
  },
  watch: {
    getUserName: {
      handler() {
        this.getDepartmentList()
      },
      deep: true
    },
    getQuarter: {
      handler() {
        this.getDepartmentList()
        this.getSeasonList()
      },
      deep: true
    },
  },
  computed: {
    getUserName() {
      return {
        userName: this.searchData.userName,
      }
    },
    getQuarter() {
      return {
        lcbYear: this.searchData.lcbYear,
        lcbQuarter: this.searchData.lcbQuarter,
      }
    },
    hasLimit() {
      return JSON.parse(sessionStorage.getItem('menuId')).includes('1321372271928725506')
    }
  },
  mounted () {
    this.tableHeight = document.documentElement['clientHeight'] - 120
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 120
    }
  },
  methods: {
    getPeriod(year, season) {
      this.searchData.lcbYear = year
      this.searchData.lcbQuarter = season
    },
    async getDepartmentList() {
      let curUserDeptPathArr = this.userInfo.deptPath.split(',')
      let curUserDeptId = curUserDeptPathArr.length >= 2 ? curUserDeptPathArr[curUserDeptPathArr.length-2] : ''
      this.departmentList = []
      let deptList = await this.$httpN.postB('sys/dept/listAll')
      let idArr = deptList.filter( item => item.pid === '0').map(item => item.id)
      let firstLevelDepartment = deptList.filter( item => idArr.includes(item.pid) )
      firstLevelDepartment.forEach( item => item.hasChildren = true)
      this.departmentList = this.hasLimit ? firstLevelDepartment : firstLevelDepartment.filter(dept => dept.id === curUserDeptId)
    },
    async getStatisticsList(tree, treeNode, resolve) {
      let dept = tree
      let {list} = await this.$httpN.postB('appraisal/lcbresultrecord/deptList', {
        deptId: dept.id,
        userName: this.searchData.userName,
        lcbYear: this.searchData.lcbYear,
        lcbQuarter: this.searchData.lcbQuarter,
        limit: this.searchData.limit,
      })
      resolve(list)
    },
    async showDetailDialog(row) {
      this.curUser = {
        dingId: row.lcbDingId,
        dingName: row.userName,
        department: row.deptName,
      }
      this.getPersonList()
      this.dialogVisible = true;
    },
    async getSeasonList() {
      formUtil.resetData(this.seasonData)
      let list = await this.$httpN.postB('appraisal/lcbstatistics/list', {
        statisticsYear: this.searchData.lcbYear,
        statisticsQuarter: this.searchData.lcbQuarter - 1
      })
      if(list.length > 0) this.seasonData = list[0]
    },
    async getPersonList() {
      let {list} = await this.$httpN.postB('appraisal/lcbresultrecord/list', { lcbDingId: this.curUser.dingId, limit: 999 })
      list.forEach( item => {
        item.yearQuarter = item.lcbYear+'-'+item.lcbQuarter
      })
      this.personList = list
    },
    //同步积分红利季度统计数据
    async synData() {
      await this.$httpN.postB('appraisal/lcbstatistics/synLcbStatisticsData')
    },
    async synLcbData() {
      if( !await this.$httpN.postB('appraisal/lcbresultrecord/synLcbData', { id: this.curUser.dingId }) ) return
      this.getPersonList()
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if(row.pid) {
        return [1, 5];
        if(columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
          return [0, 0]
        }
      }
    },
  }
}
</script>

<style lang='scss' scoped>
.content-wrapper {
  height: 100vh;
  min-width: 500px;
  .nav {
    display: flex;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
    .el-breadcrumb {
      display: flex;
      align-items: center;
      .el-breadcrumb__item {
        float: none;
      }
    }
  }
  .content {
    height: calc(100vh - 50px);
    padding-bottom: 20px;
    overflow: auto;
    .search-bar {
      padding: 0 20px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .main-content {
      padding: 0 20px;
    }
  }
}
.dialog-style {
  /deep/ .el-dialog__header, /deep/ .el-dialog__body {
    padding: 0;
  }
  .title {
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #DCDFE6;
    position: relative;
    .back {
      position: absolute;
      left: 20px;
      top: 7px;
      cursor: pointer;
    }
  }
  .content {
    padding: 0 20px;
    .info-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info {
        display: flex;
        line-height: 50px;
        .info-item {
          margin-right: 50px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>